import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Input, Select, Tag } from "antd";
// http
import http from '../../utils/request';

const { Option } = Select;

class NotifyAdminRecordManage extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "消息用户", dataIndex: "user_name", key: "user_name"},
                {title: "消息名称", dataIndex: "message_name", key: "message_name"},
                {title: "消息内容", dataIndex: "message", key: "message"},
                {title: "消息群组", dataIndex: "notify_admin_groups", key: "notify_admin_groups",
                    render: (text, rowData) => {
                        var tag_style = {float: 'left', margin: '2px'}
                        return(
                            <div>
                                {
                                rowData.notify_admin_groups.map(notify_admin_group => (
                                    <div style={tag_style}><Tag key={notify_admin_group} color="processing">{notify_admin_group}</Tag></div>
                                ))
                                }
                            </div>
                        )
                    }            
                },
                {title: "消息时间", dataIndex: "created", key: "created"}
            ],
            loading: false,
            search_cloud_platform_name: '',
            search_option_notify_admin_group: [], //钉钉消息
        }
    }

    componentDidMount() {
        this.loadData()
        this.loadNotifyAdminGroup()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'message__contains': this.state.search_message,
        }

        // 获取列表
        http.get('/notify/admin/record', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    loadNotifyAdminGroup = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/notify/admin/group', {params: requestData}).then(response=>{
            const search_option_notify_admin_group = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_notify_admin_group.push(<Option key={resp_data[i].id}>{resp_data[i].group_title}</Option>)
            }
            this.setState({
                search_option_notify_admin_group: search_option_notify_admin_group
            })
        })
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_message: data.message ? data.message : null,
        })
        this.loadData()
    }

    render(){
        const { loading, dataSource, columns, page, total } = this.state
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}


        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="消息内容" name="message">
                        <Input placeholder="请输入消息内容"  />
                    </Form.Item>

                    <Form.Item label="消息类型" name="message_type">
                        <Input placeholder="请输入消息类型"  />
                    </Form.Item>

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}></div>

                <Table
                    pagination={false} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 500, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

            </Fragment>
        )
    }
}
export default NotifyAdminRecordManage;